<template>
 <div id='app'>
    <div class="swiper">
      <div class="map">
        <div class="left">
            <div class="sh" @click="city">
              <span>上海</span>
              <van-icon name="arrow-down" />
            </div>
            <div class="search">
              <van-icon name="search" />
              <input type="text" placeholder="请输入小区或地址">
            </div>
        </div>
        <div class="right">
          <van-icon name="location-o" />
        </div>
      </div>
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="item in swiperImg" :key="item.id">
        <img :src="item.imgSrc" alt="">
      </van-swipe-item>
      </van-swipe>
      <div class="swmen">
          <div>
            <img src="../assets/下载.png" alt="">
            <p>整租</p>
          </div>
          <div>
            <img src="../assets/下载 1.png" alt="">
            <p>整租</p>
          </div>
          <div>
            <img src="../assets/下载 2.png" alt="">
            <p>整租</p>
          </div>
          <div>
            <img src="../assets/下载 3.png" alt="">
            <p>整租</p>
          </div>
      </div>
    </div>
    <div class="rentHome">
      <div class="title">
        <h3>租房小组</h3>
        <span>更多</span>
      </div>
      <div class="hm">
        <div class="card" v-for="item in rent" :key="item.id">
        <div>
          <h4>{{item.title}}</h4>
          <p>{{item.desc}}</p>
        </div>
        <img :src="item.imgSrc" alt="">
      </div>
      </div>
    </div>
    <div class="message">
      <h3>最新咨询</h3>
      <div class="mes">
        <ul>
          <li v-for="item in list" :key="item.id">
            <img :src="item.imgSrc" alt="">
            <div class="top">
              <h4>{{item.title}}</h4>
              <div class="boom">
                <span>{{item.from}}</span>
                <span>{{item.date}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
 </div>
</template>

<script>
import { swiper, rentHome, message } from '../api/user'
export default {
  data () {
    return {
      swiperImg: [],
      rent: [],
      list: []
    }
  },

  components: {},
  created () {
    this.Getswiper()
    this.renthome()
    this.message()
  },
  methods: {
    city () {
      this.$router.push('/city')
    },
    async Getswiper () {
      const res = await swiper()
      this.swiperImg = res.data.body
      this.swiperImg.forEach(item => {
        item.imgSrc = 'http://124.223.73.204:8080' + item.imgSrc
      })
    },
    async renthome () {
      const res = await rentHome()
      this.rent = res.data.body
      this.rent.forEach(item => {
        item.imgSrc = 'http://124.223.73.204:8080' + item.imgSrc
      })
    },
    async message () {
      const res = await message()
      this.list = res.data.body
      this.list.forEach(item => {
        item.imgSrc = 'http://124.223.73.204:8080' + item.imgSrc
      })
      console.log(this.list)
    }
  }
}
</script>

<style scoped>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    height: 210px;
  }
  .van-swipe-item img{
    height: 210px;
    width: 100%;
  }
.swmen{
  display: flex;
  height: 100px;
  background-color: white;
}
.swiper{
  position: relative;
}
.map{
  position: absolute;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  margin: 20px 0;
}
.left{
  display: flex;
  border: 0px solid black;
  height: 35px;
  align-items: center;
  background-color: white;
  width: 85%;
}
.sh{
  border-right:1px solid black ;
  margin-right: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}
.sh span{
  font-size: 14px;
  color: #333333;
}
.search .van-icon{
  font-size: 20px;
  color: #9c9fa1;
}
.search input{
  border: 0;
}
.right{
  font-size: 25px;
  color: white;
}
.swmen div{
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.swmen div img{
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
}
.swmen div p{
  font-size: 13px;
  color: #333333;
}
.rentHome{
  padding: 0 11px;
  box-sizing: border-box;
}
.rentHome .title{
  display: flex;
}
.rentHome .card{
  display: flex;
  justify-content: center;
  align-items: center;
}
.hm{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
.title{
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}
.title h3{
  font-size: 15px;
}
.title span{
  font-size: 14px;
  color: #787d82;
}
.card{
  width: 173px;
  height: 85px;
  background-color: white;
  margin-bottom: 10px;
}
.card div{
  margin-right: 15px;
}
.card img{
  width: 55px;
  height: 55px;
}
.card h4{
  font-size: 14px;
}
.card p{
  font-size: 13px;
  color: #999999;
  margin-top: 5px;
}
.message{
  background-color: white;
  padding: 10px 15px;
  margin-bottom: 40px;
}
.message h3{
  font-size: 15px;
}
.mes ul li{
  display: flex;
  border-bottom:1px solid #e5e5e5 ;
  margin: 10px 0;
  padding: 10px 0;
  align-items: center;
  justify-content: center;
}
.mes ul li img{
  width: 120px;
  height: 90px;
  margin-right: 15px;
}
.top{
  display: flex;
  flex-direction: column;
}
.top h4{
  font-size: 14px;
  margin-bottom: 30px;
}
.top .boom{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #9c9fa1;
}
</style>
